//
// 消息
//
<template>
  <div class="tenantMenu_main main_container">
    <div class="main_header">
      <div class="padding_container">
        <div class="right">
          <HeaderOperation :parent="this" />
        </div>
      </div>
    </div>
    <div v-loading="loading" class="main_main">
      <SearchBar :parent="this" />
      <div class="main_main_btn">
        <div class="main_btn_read" :class="{active : pageData.status == 2}" @click="btnClick(2)">
          <span>全部</span>
        </div>
        <div class="main_btn_unread" :class="{active : pageData.status == 0}" @click="btnClick(0)">
          <span v-if="information !== ''">未读（{{ information }}）</span>
          <span v-else>未读</span>
        </div>
        <div class="main_btn_unread" :class="{active : pageData.status == 1}" @click="btnClick(1)">
          <span>已读</span>
        </div>
      </div>
      <div ref="table_container" class="table_container">
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          :height="tableHeight"
          :header-cell-style="messageStyle"
          :cell-class-name="cellClassName"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @sort-change="(column)=>{sortChange(column, this)}"
          @selection-change="(val)=>{selectionChange(val, this)}"
        >

          <template slot="empty">
            <div class="empty_content">
              <el-image
                style="width: 120px; height: 100px; margin-left: calc(50% - 65px)"
                :src="imageUrl"
              />
              <div>
                暂无消息
              </div>
            </div>
          </template>
          <el-table-column type="selection" width="70" align="center" />
          <el-table-column
            :show-overflow-tooltip="true"
            label="消息内容"
            min-width="400"
            prop="content"
          >
            <template slot-scope="scope">
              <div class="message_content">
                <div v-if="scope.row.status==0" class="viewed_content" />
                <div v-else class="viewed_content2" />
                <div v-html="scope.row.content" />
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="状态"
            min-width="70"
          >
            <template slot-scope="scope">
              <StatusColum :is-gray="scope.row.isGray = '1'" :status-name="scope.row.statusName" />
            </template>
          </el-table-column> -->
          <el-table-column
            label="消息类型"
            min-width="70"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.title }}</div>
            </template>
          </el-table-column>
          <Column
            v-for="(column,index) in tableColumns"
            :key="index"
            :prop="column.prop"
            :is-show="column.isShow"
            :label="column.label"
            :sortable="column.sortable"
            :width="column.width"
            :min-width="column.minWidth"
            :align="column.align"
          />
          <el-table-column label="操作" align="center" fixed="right" width="60">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.title !== '审批人设置'"
                type="text"
                @click.stop="deleteOne(scope.row)"
              >删除</el-button>
              <span v-else class="el-button--text button_grey">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <pagination
        :total="total"
        :page.sync="pageData.pageNum"
        :limit.sync="pageData.pageSize"
        :selected-num="selectionsAll.length"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script>
import imageUrl from '@/assets/images/backlogTask/消息暂无数据.jpg'

import { listForSaleCollect, remove, afficheRead } from '@/api/backlogTask/backlogTask'
import { getMsgNum } from '@/api/backlogTask/backlogTask'
import { mapGetters } from 'vuex'
import { getInfo } from '@/api/saleManage/saleOrder'
import { getInfo as getInfoSend } from '@/api/saleManage/saleSend'
import { getInfo as getAdditionalPaymentOrderInfo } from '@/api/receivableAndPayable/receivableAndPayableManage/additionalPaymentOrder'
import { getInfo as getPaymentOrderInfo } from '@/api/receivableAndPayable/receivableAndPayableManage/paymentOrder'
import ShowMaterialDetail from '@/views/receivableAndPayable/paymentOrder/showMaterialDetail'
import ShowDetailSend from '@/views/saleManage/saleSend/showDetail'
import ShowDetail from '@/views/saleManage/saleOrder/showDetail'
import ShowAdditionalPaymentOrderDetail from '@/views/receivableAndPayable/additionalPaymentOrder/showAdditionalPaymentOrder'
import adjustment from './adjustment'
export default {
  name: 'ByMaterial',
  computed: {
    ...mapGetters([
      'notificationChangeTag', 'userId'
      // '’， ‘notificationId'
    ])
  },
  watch: {
    notificationChangeTag() {
      this.getList()
    }
  },
  data() {
    return {
      imageUrl: imageUrl,
      loading: true,
      pageId: '消息', // 页面唯一标识
      isGetList: '1', // 表示一进页面不需要调list方法
      pageData: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'sendTime',
        isAsc: 'desc',
        status: 2,
        type: '1'
      },
      information: '',
      itenindex: 1,
      // tableKey: 1,
      total: 1, // 数据一共有多少条
      mainId: 'id', // 表格行ID
      tableHeight: '0', // 表格高度
      tableData: [], // 表格数据
      tableColumns: [], // 表格实际用的字段
      searchColumns: [], // 搜索区实际用的字段
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      defaultTableColumns: [// 表格常规字段（初始值）
        // { prop: 'menuName', label: '消息标题' },
        // { prop: 'content', label: '消息内容', canOrder: false },
        { prop: 'userName', label: '发送人员', canOrder: false, minWidth: 70 },
        { prop: 'sendTime', label: '发送时间', canOrder: false, minWidth: 100, sortable: 'custom' }
      ],
      defaultSearchColumns: [// 搜索区常规字段（初始值）
        // { prop: 'status', label: '状态', type: 'select', optionsName: 'statusOptions', hasDefault: true, defaultKey: 'statusDefault' },
        { prop: 'title', label: '消息类型', type: 'input' },
        { prop: 'sendTime', label: '发送时间', type: 'time', isTime: true }
      ],
      operationData: [ // 右上角的操作按钮
        { label: '批量删除1', perm: '' },
        { label: '标记已读', perm: '' }
      ],
      statusOptions: [ // 选择组件数据源
        { value: undefined, label: '全部' },
        { value: 1, label: '已读' },
        { value: 0, label: '未读' }
      ],
      row: {},
      showKey: [
        {
          name: '基本信息',
          columns: [
            { type: 'form', name: '销售订单号', key: 'code' },
            { type: 'form', name: '销售人员', key: 'orderName' },
            // { type: 'form', name: '制单日期', key: 'orderTime' },
            { type: 'form', name: '订单类型', key: 'orderTypeLabel' },
            { type: 'form', name: '客户名称', key: 'customerName' },
            { type: 'form', name: '订货日期', key: 'orderGoodsTime' },
            { type: 'form', name: '合同号', key: 'contractCode' },
            { type: 'form', name: '未税总金额', key: 'allPrice' },
            { type: 'form', name: '含税总金额', key: 'taxAllPrice' },
            { type: 'form', name: '税额', key: 'tax' },
            { type: 'file', name: '附件', fileName: 'fileName', fileRealName: 'fileRealName', fileUrl: 'url' },
            { type: 'form', name: '备注', key: 'remark', length: 'double' },
            {
              type: 'table', name: '订单明细', key: 'data'
            },
            { type: 'print', name: '打印记录', key: '' }
          ]
        },
        {
          name: '客户信息',
          columns: [
            { type: 'formData', name: '计税方式', key: 'taxTypeLabel' },
            { type: 'formData', name: '税率%', key: 'taxRateLabel' },
            { type: 'formData', name: '结算方式', key: 'settlementTypeLabel' },
            { type: 'formData', name: '结算币别', key: 'settlementCurrencyLabel' },
            { type: 'formData2', name: '交货方式', key: 'deliveryTypeLabel' },
            { type: 'formData2', name: '联系人', key: 'consignee' },
            { type: 'formData2', name: '联系方式', key: 'phone' },
            { type: 'formData2', name: '注意事项', key: 'attentionMatters' },
            { type: 'formData2', name: '收货地址', key: 'deliveryAddress', length: 'double' }
          ]
        },
        {
          name: '审批详情',
          columns: [
            { type: 'review', name: '评审进度', key: 'taskList' }
          ]
        }
      ],
      showKey1: [
        {
          name: '基本信息',
          columns: [
            { type: 'form', name: '付款单号', key: 'code' },
            { type: 'form', name: '制单人员', key: 'receiptByName' },
            { type: 'form', name: '制单日期', key: 'receiptTime' },
            { type: 'form', name: '供应商', key: 'supplierName' },
            { type: 'form', name: '关联订单', key: 'formCode' },
            { type: 'form', name: '含税总金额', key: 'taxAllPrice' },
            { type: 'form', name: '已开票金额', key: 'hasReceiptPrice' },
            { type: 'form', name: '未开票金额', key: 'unReceiptPrice' },
            { type: 'form', name: '已付款金额', key: 'hasPrice' },
            { type: 'form', name: '未付款金额', key: 'unPrice' },
            { type: 'file1', name: '订单附件', fileName: 'orderFileName', fileRealName: 'orderFileRealName', fileUrl: 'orderUrl' },
            { type: 'file', name: '附件', fileName: 'fileName', fileRealName: 'fileRealName', fileUrl: 'fileUrl' },
            { type: 'form', name: '备注', key: 'remark', length: 'double' },
            {
              type: 'table', name: '', key: 'details'
            }
          ]
        },
        {
          name: '供应商收款信息',
          columns: [
            {
              type: 'table2', name: '', key: 'concatSupplierList', columns: [ // type: 'table' 表示是表格
                { name: '银行账号', key: 'bankAccount' },
                { name: '账户名称', key: 'accountName' },
                { name: '收款银行', key: 'dueBank' },
                { name: '注意事项', key: 'announcements' }
              ]
            }
          ]
        },
        {
          name: '审批详情',
          columns: [
            { type: 'review', name: '评审进度', key: 'taskList' }
          ]
        }
      ],
      showKey2: [
        {
          name: '基本信息',
          columns: [
            { type: 'form', name: '付款单号', key: 'code' },
            { type: 'form', name: '制单人员', key: 'receiptByName' },
            { type: 'form', name: '制单日期', key: 'receiptTime' },
            { type: 'form', name: '付款方', key: 'payer' },
            { type: 'form', name: '付款类型', key: 'paymentTypeCodeName' },
            { type: 'form', name: '关联订单', key: 'formCode' },
            { type: 'form', name: '含税总金额', key: 'taxAllPrice' },
            { type: 'file1', name: '订单附件', fileName: 'orderFileName', fileRealName: 'orderFileRealName', fileUrl: 'orderUrl' },
            { type: 'file', name: '附件', fileName: 'fileName', fileRealName: 'fileRealName', fileUrl: 'fileUrl' },
            { type: 'form', name: '备注', key: 'remark', length: 'double' },
            {
              type: 'table', name: '', key: 'details'
            }
          ]
        },
        {
          name: '供应商收款信息',
          columns: [
            {
              type: 'table2', name: '', key: 'concatSupplierList', columns: [ // type: 'table' 表示是表格
                { name: '银行账号', key: 'bankAccount' },
                { name: '账户名称', key: 'accountName' },
                { name: '收款银行', key: 'dueBank' },
                { name: '注意事项', key: 'announcements' }
              ]
            }
          ]
        },
        {
          name: '审批详情',
          columns: [
            { type: 'review', name: '评审进度', key: 'taskList' }
          ]
        }
      ],
      isStuts: '',
      statusDefault: 0
    }
  },
  created() {
  },
  methods: {
    cellClassName(row) {
      if (row.column.property == 'content' && row.row.status == 0) {
        return 'overstriking'
      }
    },
    btnClick(index) {
      this.pageData.status = index
      this.getList()
    },
    messageStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex == 1) { // 指定坐标
        return {
          padding: '0 20px'
        }
      } else {
        return ''
      }
    },
    getList() {
      const _this = this
      listForSaleCollect(this.pageData).then(res => {
        this.tableData = res.data
        // 判断能不能删除，存入标识
        this.tableData.forEach(item => {
          if (item.title !== '审批人设置') {
            item.canNotSelectDelete = false
          } else {
            item.canNotSelectDelete = true // 不能删除的行给标记
          }
        })
        this.total = res.total
        this.loading = false
        this.$nextTick(() => {
          this.setSelectRow(this)// 设置行选中
          this.tableHeight = this.$refs.table_container.offsetHeight
          const ele_p = document.getElementsByClassName('orderCode')
          for (let i = 0; i < ele_p.length; i++) {
            ele_p[i].onclick = function() {
              _this.messageId = ele_p[i].getAttribute('messageid')
              _this.showDetail()
            }
          }
          const ele_e = document.getElementsByClassName('examine')
          for (let j = 0; j < ele_e.length; j++) {
            ele_e[j].onclick = function() {
              _this.messageId = ele_e[j].getAttribute('messageid')
              _this.showDetail2()
            }
          }
        })
      })
      getMsgNum(this.userId).then(res => {
        this.information = res.data.information.num
        if (this.information == '0') {
          this.information = ''
        }
      })
    },
    showDetail() { // 用来冒泡 触发行点击的方法
      const row = this.tableData.filter(item => item.id == this.messageId).length == 1
        ? (this.tableData.filter(item => item.id == this.messageId))[0]
        : {}
      if (!row.id) {
        return
      }
      if (row.menuPermission === '0' && row.title != '系统通知' && row.title !== '系统公告' && row.title !== '企业公告') {
        this.$message.warning('您没有当前页面的权限,请联系管理员')
      } else {
        afficheRead({ ids: row.id }).then(res => {
          if (res.code == 200) {
            if (row.title == '销售订单') {
              getInfo(row.contentId).then(res => {
                res.data.title = row.title
                if (res.data.status != 0 && res.data.isApprovalShow != 1) {
                  const obj = {
                    taskNoName: '审批结束',
                    taskList: []
                  }
                  if (res.data.taskList[res.data.taskList.length - 1].approvalStatus == 3 || res.data.taskList[res.data.taskList.length - 1].approvalStatus == 4) {
                    obj.approvalStatus = 5
                  } else {
                    obj.approvalStatus = 0
                  }
                  res.data.taskList.push(obj)
                } // 跳转过来直接查看审批
                this.$layer.iframe({// 弹框
                  content: {
                    content: ShowDetail, // 传递的组件对象
                    parent: this, // 当前的vue对象
                    data: {
                      showData: res.data,
                      businessId: row.contentId,
                      isSaleOrder: true,
                      showKey: this.showKey
                    }// props
                  },
                  area: ['1320px', '700px'],
                  title: '查看销售订单', // 标题
                  shadeClose: false // 点击遮罩是否关闭
                })
              })
            } else if (row.title == '销售发货单') {
              getInfoSend(row.contentId).then(res => {
                if (res.data.status != 0 && res.data.isApprovalShow != 1) {
                  const obj = {
                    taskNoName: '审批结束',
                    taskList: []
                  }
                  if (res.data.taskList[res.data.taskList.length - 1].approvalStatus == 3 || res.data.taskList[res.data.taskList.length - 1].approvalStatus == 4) {
                    obj.approvalStatus = 5
                  } else {
                    obj.approvalStatus = 0
                  }
                  res.data.taskList.push(obj)
                } // 跳转过来直接查看审批
                this.$layer.iframe({// 弹框
                  content: {
                    content: ShowDetailSend, // 传递的组件对象
                    parent: this, // 当前的vue对象
                    data: {
                      showData: {
                        ...res.data,
                        title: row.title,
                        customerName: res.data.saleCustomerListVo.name,
                        deliveryTypeLabel: res.data.saleDeliverInformation ? res.data.saleDeliverInformation.deliveryTypeLabel : '' },
                      showKey: this.showKey,
                      businessId: row.contentId
                    }// props
                  },
                  area: ['1350px', '700px'],
                  title: '查看销售发货单', // 标题
                  shadeClose: false // 点击遮罩是否关闭
                })
              })
            } else if (row.title == '付款单') {
              getPaymentOrderInfo(row.contentId).then(res => {
                if (res.data.status != 0 && res.data.isApprovalShow != 1) {
                  const obj = {
                    taskNoName: '审批结束',
                    taskList: []
                  }
                  if (res.data.taskList[res.data.taskList.length - 1].approvalStatus == 3 || res.data.taskList[res.data.taskList.length - 1].approvalStatus == 4) {
                    obj.approvalStatus = 5
                  } else {
                    obj.approvalStatus = 0
                  }
                  res.data.taskList.push(obj)
                } // 跳转过来直接查看审批
                this.$layer.iframe({// 弹框
                  content: {
                    content: ShowMaterialDetail, // 传递的组件对象
                    parent: this, // 当前的vue对象
                    data: {
                      showData: res.data,
                      businessId: row.contentId,
                      showKey: this.showKey1,
                      isSaleOrder: true
                    }// props
                  },
                  area: ['1320px', '700px'],
                  title: '查看付款单', // 标题
                  shadeClose: false // 点击遮罩是否关闭
                })
              })
            } else if (row.title == '附加付款单') {
              getAdditionalPaymentOrderInfo(row.contentId).then(res => {
                if (res.data.status != 0 && res.data.isApprovalShow != 1) {
                  const obj = {
                    taskNoName: '审批结束',
                    taskList: []
                  }
                  if (res.data.taskList[res.data.taskList.length - 1].approvalStatus == 3 || res.data.taskList[res.data.taskList.length - 1].approvalStatus == 4) {
                    obj.approvalStatus = 5
                  } else {
                    obj.approvalStatus = 0
                  }
                  res.data.taskList.push(obj)
                } // 跳转过来直接查看审批
                this.$layer.iframe({// 弹框
                  content: {
                    content: ShowAdditionalPaymentOrderDetail, // 传递的组件对象
                    parent: this, // 当前的vue对象
                    data: {
                      showData: res.data,
                      businessId: row.contentId,
                      showKey: this.showKey2,
                      isSaleOrder: true
                    }// props
                  },
                  area: ['1320px', '700px'],
                  title: '查看附加付款单', // 标题
                  shadeClose: false // 点击遮罩是否关闭
                })
              })
            }
          }
        })
        this.getList()
      }
    },
    approverInstall(data) { // 用来给右上角小铃铛触发的方法
      if (data.menuPermission === '0' && data.title != '系统通知' && data.title !== '系统公告' && data.title !== '企业公告') {
        this.$message.warning('您没有当前页面的权限,请联系管理员')
      } else {
        afficheRead({ ids: data.id }).then(res => {
          if (data.title == '审批人设置') {
            this.$layer.iframe({// 弹框
              content: {
                content: adjustment, // 传递的组件对象
                parent: this, // 当前的vue对象
                data: {
                  userList: data
                }// props
              },
              area: ['480px', '205px'],
              title: '审批人调整', // 标题
              shadeClose: false // 点击遮罩是否关闭
            })
          }
        })
        this.$store.dispatch('notification/changeId', 0)
        this.getList()
      }
    },
    showDetail2() { // 触发行点击的方法
      const row2 = this.tableData.filter(item => item.id == this.messageId).length == 1
        ? (this.tableData.filter(item => item.id == this.messageId))[0]
        : {}
      if (!row2.id) {
        return
      }
      if (row2.menuPermission === '0' && row2.title != '系统通知' && row2.title !== '系统公告' && row2.title !== '企业公告') {
        this.$message.warning('您没有当前页面的权限,请联系管理员')
      } else {
        if (row2.title == '审批人设置') {
          afficheRead({ ids: row2.id }).then(res => {
            this.$layer.iframe({// 弹框
              content: {
                content: adjustment, // 传递的组件对象
                parent: this, // 当前的vue对象
                data: {
                  userList: row2
                }// props
              },
              area: ['480px', '205px'],
              title: '审批人调整', // 标题
              shadeClose: false // 点击遮罩是否关闭
            })
            this.getList()
          })
        } else {
          afficheRead({ ids: row2.id }).then(res => {
            if (this.$store.state.order.contendId) {
              this.showDetail({ id: this.$store.state.order.contendId })
              this.$store.state.order.contendId = ''
            }
            if (res.code == 200) {
              if (row2.title == '销售订单') {
                this.$store.state.order.contendId = row2.contentId
                this.$router.push('/' + row2.menuComponent)
                this.$parent.$parent.$parent.getInfoMsgNum()
              } else if (row2.title == '销售发货单') {
                this.$store.state.order.contendId = row2.contentId
                this.$router.push('/' + row2.menuComponent)
                this.$parent.$parent.$parent.getInfoMsgNum()
              } else if (row2.title == '保养任务') {
                this.$store.state.order.contendId = row2.contentId
                this.$router.push('/' + row2.menuComponent)
                this.$parent.$parent.$parent.getInfoMsgNum()
                this.$store.state.order.isStatus = '1'
              } else if (row2.title == '设备维修') {
                this.$store.state.order.contendId = row2.contentId
                this.$router.push('/' + row2.menuComponent)
                this.$parent.$parent.$parent.getInfoMsgNum()
                this.$store.state.order.isStatus = '1'
              } else if (row2.title == '点检任务') {
                this.$store.state.order.contendId = row2.contentId
                this.$router.push('/' + row2.menuComponent)
                this.$parent.$parent.$parent.getInfoMsgNum()
                this.$store.state.order.isStatus = '1'
              } else if (row2.title == '附加付款单') {
                this.$store.state.order.contendId = row2.contentId
                this.$store.dispatch('notification/changeId', row2.contentId)
                this.$router.push('/' + row2.menuComponent)
                // this.$store.dispatch('notification/changeDataStatus', row2.menuStatus)
                this.$parent.$parent.$parent.getInfoMsgNum()
                this.$store.state.order.isStatus = '1'
              } else if (row2.title == '付款单') {
                this.$store.dispatch('notification/changeId', row2.contentId)
                this.$store.state.order.contendId = row2.contentId
                this.$router.push('/' + row2.menuComponent)
                this.$parent.$parent.$parent.getInfoMsgNum()
                // this.$store.dispatch('notification/changeDataStatus', row2.menuStatus)
              }
            }
          })
        }
      }
    },
    getExportData(data) {
      return new Promise(function(resolve, reject) {
        listForSaleCollect(data).then(res => {
          resolve(res.data.dataTable.data)
        })
      })
    },
    deleteOne(row) {
      const _this = this
      this.$confirm('确定要删除吗', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消', cancelButtonClass: 'cancelConfirm',
        type: 'warning'
      }).then(function() {
        remove(row[_this.mainId]).then(res => {
          _this.$message({
            message: res.msg,
            type: 'success'
          })
          _this.selectionsAll = []
          _this.getList()
        })
      }).catch(() => {})
    },
    // 当前页的删除接口
    deleteMethod(deleteIds) {
      return remove(deleteIds)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.overstriking {
  font-weight: 700 !important;
}
.table_container {
  margin-top: 10px !important;
}
.active {
  height: 100% !important;
  background: rgba(56, 123, 253, 1) !important;
  color: #fff !important;
  border: none !important;
  font-size: 14px !important;
}
.main_main_btn {
  display: flex;
  height: 30px;
  width: 100%;
  padding-left: 29px;
  margin-top: 20px;
  .main_btn_read {
    width: 85px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(228, 228, 228, 1);
    border-radius:4px 0px 0px 4px;
    font-size: 14px;
    color: #999999;
    cursor: pointer
  }
  .main_btn_unread:nth-of-type(2) {
    border-radius:0px 0px 0px 0px !important;
  }
  .main_btn_unread {
    width: 85px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(228, 228, 228, 1);
    border-left: none;
    border-radius:0px 4px 4px 0px;
    font-size: 14px;
    cursor: pointer;
    color: #999999;
  }
}
.message_content{
  display: flex;
  line-height: 30px;
  .viewed_content{
    width: 8px;
    height: 8px;
    background-color: #FA6B6D;
    border-radius: 50%;
    margin-top: 10px;
    margin-right: 10px;
  }
  .viewed_content2{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 10px;
    margin-right: 10px;
  }
}
/deep/ .messageId {
  display: none;
}
/deep/ .information {
  display: flex;
  line-height: 30px;
  height: 30px;
}
/deep/.orderCode {
  color: #387bfc;
  cursor: pointer;
  margin: 0px !important;
}
/deep/ .examine {
  color: #387bfc;
  cursor: pointer;
  margin: 0px !important;
}
/deep/ .examine1 {
  margin: 0px !important;
}
.main_header{
  .padding_container{
    justify-content: flex-end;
  }
}
.table_container{
  /deep/ .cell{
    div{
      max-width: 1000px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
